<script lang="ts" setup>
  import { reactive } from 'vue'
  import { ref } from 'vue'
  import { toRef, toRefs } from 'vue'
  // 数据
  let car = reactive({
    brand: '奔驰',
    price: 280000.00
  });
  let { brand: brand, price: price } = toRefs(car);
  let company = ref("蝉思");


  let cccc = toRef(car, 'brand');

  console.log("cccc", cccc.value);

  // 方法 
  function changePrice () {
    car.price += 50;
    console.log("修改后的价格", car.price);
  }
  function chanceCompany () {
    company.value = "北京蝉思管理咨询有限公司";
  }

  function changeCar () {
    // let { brand, price } = toRefs(car);
    // brand = "奥拓";
    car.brand = "奥拓"
  }

  function chanceOther () {
    brand.value = "吉利";
    price.value = 149999;
    console.log(brand, "-----------", price);
  }
</script>

<template>
  <div>
    <h1>{{company}}</h1>
    <h2>一辆：{{car.brand}}车，价值{{car.price}}</h2>
    <h2>测试一辆 {{brand}} 车，测试价值{{price}}</h2>
  </div>
  <div>
    <button @click="changeCar()">修改车</button>
    <button @click="changePrice()">修改价格</button>
    <button @click="chanceCompany()">修改公司名</button>
    <button @click="chanceOther()">修改其他项</button>
  </div>
</template>